<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=radar-custom
-->
<!DOCTYPE html>
<html style="height: 80%">
    <body style="height: 100%;  margin: 0;background:#33485C;">
    	
        <div id="container4" style="height: 820px;width:125%;margin-left:-13%;" ></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container4");
var myChart = echarts.init(dom);


function colorMappingChange(value) {
    var levelOption = getLevelOption(value);
    chart.setOption({
        series: [{
            levels: levelOption
        }]
    });
}

var formatUtil = echarts.format;

function getLevelOption() {
    return [
        {
            itemStyle: {
                borderColor: '#33485C',
                borderWidth: 0,
                gapWidth: 1
            },
            upperLabel: {
                show: false
            }
        },
        {
            itemStyle: {
                borderColor: '#33485C',
                borderWidth: 5,
                gapWidth: 1
            },
            emphasis: {
                itemStyle: {
                    borderColor: '#63A8E8'
                }
            }
        },
        {
            colorSaturation: [0.35, 0.5],
            itemStyle: {
                borderWidth: 3,
                gapWidth: 1,
                borderColorSaturation: 0.6
            }
        }
    ];
}

myChart.setOption(option = {

    title: {
        text: '三级指标得分率',
        left: 'center'
    },
    roam: false,
    tooltip: {
        formatter: function (info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];

            for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
            }

            return [
                '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
                '得分率: ' + formatUtil.addCommas(value) + ' %',
            ].join('');
        }
    },

    series: [
        {
            name: '各级指标得分率',
            type: 'treemap',
            visibleMin: 300,
            roam: false,
            label: {
                show: true,
                formatter: '{b}'
            },
            upperLabel: {
                show: true,
                height: 30
            },
            itemStyle: {
                borderColor: '#fff'
            },
            levels: getLevelOption(),
            data: [
            	{$third_dfl_jxt_last_string}
            ]
        }
    ]
});


        </script>
    </body>
</html>